<!-- home -->
<template>
  <div class="container">
    <van-skeleton title :row="10" :loading="loading">
      <div class="title">{{ detail.noticeTitle }}</div>
      <div class="time">{{ detail.createTime }}</div>
      <div class="ql-container ql-snow">
        <div v-html="detail.noticeContent" class="ql-editor"></div>
      </div>
    </van-skeleton>
  </div>
</template>

<script>
import { getNoticeInfo } from '@/api/news.js'
// 请求接口
export default {
  name: 'news',
  data() {
    return {
      loading: true,
      detail: {},
      noticeId: this.$route.params.id,
      content: ''
    }
  },
  computed: {},
  mounted() {},
  // 缓存激活
  activated() {
    this.noticeId = this.$route.params.id
    this.initData()
  },
  // 缓存冻结
  deactivated() {
    this.detail = {}
    this.loading = true
  },
  methods: {
    async initData() {
      // 获取详情
      const params = { noticeId: this.noticeId }
      const { data } = await getNoticeInfo(params)
      this.detail = data
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 20px 16px 32px;
  background-color: white;
  min-height: 100vh;
}
.title {
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 14px;
}
.time {
  color: rgba(0, 0, 0, 0.3);
}
.ql-container {
  border: none;
}
.ql-editor {
  padding: 10px 0 0 0;
}
</style>
